<template>
	<view class="box">
		<view>
			<video :src="videoDetail.vedioSrc" id="myVideo" controls :initial-time="videoDetail.initialTime"
				@timeupdate="videoTimeUpdateEvent" :enable-progress-gesture='false' style="width: 100%;"></video>
		</view>

		<view class="box-content-top">
			<view class="title">{{videoDetail.title}}</view>
			<view class="complete-box">
				<view class="comlete">{{videoDetail.watchNumber}}人已观看</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box-content-body">
			<view class="point-title-box">
				<view class="line"></view>
				<view class="title">学习要点</view>
			</view>
			<view class="point-detail">
				{{videoDetail.gist}}
			</view>

			<view style="margin-top: 32rpx;" class="point-title-box">
				<view class="line"></view>
				<view class="title">视频简介</view>
			</view>
			<view class="point-detail">
				{{videoDetail.digest}}
			</view>

			<view class="practice-box">
				<view class="practice-btn" style="background-color: #347DFA; color: rgba(255, 255, 255, 1);"
					v-if="videoDetail.isFinited" @click.native="toExam">课程练习</view>
				<view class="practice-btn" v-if="!videoDetail.isFinited">课程练习</view>
				<view class="practice-tip">提示：完成视频课程观看才可参与课程练习</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			// console.log("课程id" + option.id)
			// console.log("类型"+option.cid)
			this.subjectId = option.cid
			this.classId = option.id
			// console.log("类型onLoad"+this.subjectId)
			// this.changeClassStatus(16)
			this.getVideoDetail(option.id)
		},
		data() {
			return {
				video_real_time: 0,
				nitial_time: '',
				subjectId: 0,
				classId: 0,
				//总时长
				// duration:0,
				// 单个视频的详细情况
				videoDetail: {
					id: 1,

					// src:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
					// 记录视频上次播放的位置
					initialTime: 700,
					title: "紧急包扎",
					learnPoint: '意外伤害，交通事故，烧烫伤。电击伤，溺水，突发事件，火灾，泥石流，洪水',
					videoIntroduce: 'uview-plus为了更好编写css，使用了scss预处理器，使用uview-plus之前，请确认您的Hbuilder X已经安装了scss预处理器，一般情况下，相信您已经安装了。',
					isFinited: 0,

				}, // 用于绑定视频标签
				//  title:"紧急包扎",
				// videoDetail:{
				//   title:'dsadad'
				// },
			}
		},
		created() {
			// 创建视频实例指向视频控件
			this.videoContext = uni.createVideoContext('myVideo');
		},
		mounted() {
			// console.log("页面开启了")
		},
		beforeDestroy() {
			const user = uni.getStorageSync("user")
			// console.log(this.video_real_time)
			uni.request({
				url: `${this.$baseUrl}/learning/changeProgress/${this.classId}/${user.openid}/${this.video_real_time}`,
				method: 'PUT',
				success: (res) => {
					// console.log(res.data)
				}
			})
		},
		methods: {
			async getVideoDetail(id) {
				const user = uni.getStorageSync("user")
				uni.request({
					url: `${this.$baseUrl}/learning/classDetail/${this.classId}/${user.openid}`,
					method: 'GET',
					success: (res) => {
						// console.log(res.data)
						this.videoDetail = res.data.data
					}
				})
			},

			//视频看完和题目也完成的情况下，可以定义为这个小课程完成，需要改变状态
			async changeClassStatus(id) {
				const user = uni.getStorageSync("user")
				// console.log("类型changeStatus"+this.subjectId)
				//测试将16号的课程学习在缓存中更改为已完成
				uni.request({
					url: `${this.$baseUrl}/learning/changeStatus/${this.classId}/${user.openid}/${this.subjectId}`,
					method: 'PUT',
					success: (res) => {
						console.log(res)
					}
				})
			},

			async toExam() {
				// console.log("要开始练题了",this.subjectId)
				// console.log("看完",this.videoDetail.isFinited)
				uni.navigateTo({
					url: '/package_study/examSubject/examSubject?id=' + this.classId,
				})
			},
			//监听函数的运行时间
			videoTimeUpdateEvent(e) { // 播放进度改变
				var isReady = 1; // 是否开启可以视频快进 1 禁止开启
				//跳转到指定播放位置 initial-time 时间为秒
				let that = this;
				//播放的总时长
				var duration = e.detail.duration;
				// this.duration=duration;
				//实时播放进度 秒数
				var currentTime = parseInt(e.detail.currentTime);
				if (currentTime / duration >= 0.9) {
					this.videoDetail.isFinited = 1;
				}
				this.videoDetail.initialTime = this.currentTime
				// console.log('播放进度条改变', currentTime)
				// 当前视频进度
				// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
				if (that.video_real_time == 0) {
					var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
				} else {
					var jump_time = parseInt(that.video_real_time);
				}
				if (isReady == 1) {
					if (currentTime > jump_time && currentTime - jump_time > 3) {
						let videoContext = wx.createVideoContext('myVideo');
						videoContext.seek(that.video_real_time);
						wx.showToast({
							title: '未完整看完该视频，不能快进',
							icon: 'none',
							duration: 2000
						});
					}
				}
				that.video_real_time = currentTime; //实时播放进度
			},
		}

	}

</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.box {
		padding-bottom: 20rpx;

		.practice-box {
			height: 100rpx;
			width: 90%;
			// background-color: pink;
			margin: 100rpx auto;

			.practice-tip {
				font-size: 30rpx;
			}

			.practice-btn {
				height: 80rpx;
				background-color: #53c21d;
				border-radius: 10rpx;
				text-align: center;
				color: white;
				line-height: 80rpx;
				margin: 20rpx auto;

			}
		}

		.line {
			width: 750rpx;
			height: 12rpx;
			background-color: #F5F5F5;

		}

		.box-content-top {
			background-color: #FFFFFF;
			width: 100%;
			padding-top: 32rpx;
			padding-left: 32rpx;
			height: 150rpx;

			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}

			.complete-box {
				display: flex;
				height: 44rpx;
				align-items: center;
				margin-top: 16rpx;
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;

				.complete {}

				.length {
					margin-left: 24rpx;
				}
			}
		}

		.box-content-body {
			margin-top: 16rpx;
			padding-top: 32rpx;
			background-color: #FFFFFF;
			width: 750rpx;

			.point-title-box {
				margin-left: 32rpx;
				display: flex;
				align-items: center;
				height: 46rpx;

				.line {
					width: 6rpx;
					height: 26rpx;
					background: rgba(52, 125, 250, 1);
				}

				.title {
					margin-left: 8rpx;
					color: rgba(51, 51, 51, 1);
					font-weight: 600;
				}
			}

			.point-detail {
				width: 686rpx;
				margin-left: 32rpx;
				text-indent: 2em;
				font-size: 28rpx;
				color: rgba(102, 102, 102, 1);
				margin-top: 16rpx;

			}

			.practice-box {
				transform: translateY(-30rpx);

				.practice-btn {
					height: 104rpx;
					font-size: 32rpx;
					font-weight: 400;
					line-height: 104rpx;
					color: rgba(102, 102, 102, 1);

					border-radius: 8rpx;
					background-color: #E6E6E6;
				}

				.practice-tip {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 44rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}
</style>
